@import "function";
@import "var";
@import "mixin";

.home-main-view{
  height: 100%;
  position: relative;
  padding-top:px2rem(75px);
  .swiper-box{
    img{
      width: 100%;
      display: block;
    }
  }
  .header-nav,.home-filter{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  .home-filter{
    top:px2rem(75px);
    height:px2rem(67px);
    font-size: px2rem(30px);
    width: 100%;
    background-color: #f6f6f6;
    color: #b6b6b6;
    z-index:9;
    .box{
      height: 100%;
      padding-right:px2rem(67px);
      ul{
        width: 100%;
        height: 100%;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        li{
          position: relative;
          display: inline-block;
          padding: 0 px2rem(25px);
          height: px2rem(67px);
          cursor: pointer;
          overflow: hidden;
          span{
            line-height:px2rem(65px);
          }
          &.active{
            color: $main_color;
            &:after{
              position: absolute;
              content: "";
              bottom: -1px;
              left: 0;
              width: 100%;
              border-bottom:2px solid $main_color;
            }
          }
        }
      }
    }
    .more {
      position: absolute;
      right: 0;
      top: 0;
      height: px2rem(67px);
      width: px2rem(115px);
      line-height: px2rem(60px);
      padding: 0;
      border: none;
      text-align: right;
      background: linear-gradient(to right, transparent, #f6f6f6);
      i{
        display: inline-block;
        font-size: px2rem(45px);
        font-weight: 700;
        color: #646464;
        height:px2rem(67px);
        width:px2rem(67px);
        text-align: center;
      }
    }
    &.search-filter{
      .box{
        ul{
          display: flex;
          li{
            flex: 1;
            text-align: center;
            &.active{
              color: $main_color;
              border-bottom:none;
              &:after{
                display: none;
              }
            }
          }
        }
      }
    }
  }
  .swiper-pagination-bullet {
    background-color: #fff;
    opacity: 1;
    width: 5px;
    height: 5px;
  }
  .swiper-pagination-bullet-active{
    width: 8px;
    height: 8px;
    position: relative;
    top: 1px;
  }

  .scroll-loading-wrapper{
    padding-top:px2rem(67px);
  }
  .list{
    .list-content{
      li {
        padding-left:px2rem(30px);
        &>a,&>div{
          @include borderPart(#e0e0e1,bottom);
          display: block;
          height: 100%;
          padding: px2rem(30px) px2rem(30px) px2rem(30px) 0;
        }
        &:last-of-type{
          border-bottom: none;
        }
        &:hover,&:active{
          animation:bgFade .9s;
        }
      }
      .title {
        color: #464646;
        letter-spacing: 1px;
        line-height:px2rem(36px);
        margin: 0 0 px2rem(15px) 0;
        .tag {
          display: inline-block;
          height: px2rem(40px);
          width: px2rem(34px);
          position: relative;
          top:px2rem(-3px);
          background-color: #a1de5c;
          font-size: px2rem(25px);
          text-align: center;
          color: #ffffff;
          margin-right: px2rem(10px);
          &:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            border-bottom: px2rem(7px) solid #ffffff;
            border-top: px2rem(7px) solid transparent;
            border-left: px2rem(17px) solid transparent;
            border-right: px2rem(17px) solid transparent;
          }
          &.yuan{
            background-color: #50BAE1;
          }
          &.jian{
            background-color: #E25050;
          }
        }
      }
      &.article-list{
        .title{
          font-size: px2rem(30px);
        }
        a:visited{
          .title{
            color: #888888;
          }
        }
        .bewrite{
          color: #888888;
          font-size: px2rem(26px);
          line-height:px2rem(40px);
         @include lineclamp(2);
        }
        .atricle-info{
          margin:px2rem(15px) 0 0 0;
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          color: #888888;
          font-size: px2rem(25px);
          i{
            font-size: px2rem(26px);
          }
        }
      }
      &.tweet-list{
        a,li>div{
          display: flex;
        }
        .userimg {
          width: px2rem(100px);
          height:px2rem(100px);
          border-radius: 50%;
          flex: 0 0 px2rem(100px);
          position: relative;
          z-index: 2;
        }
        .content{
          flex: 1;
          padding-left:px2rem(20px);
          color: #333;
          width: 100%;
          overflow: hidden;
          position: relative;
          z-index: 2;
        }
        .username{
          font-size: px2rem(30px);
          color: #000;
        }
        .user-content{

          font-size: px2rem(26px);
          margin:px2rem(15px) 0;
        }
        .operate-bottom{
          color: #999;
          display: flex;
          align-items:center;
          justify-content:space-between;
        }
      }
    }
  }
  &.user-blog{
    .scroll-loading-wrapper{
      margin-top:px2rem(-75px);
      padding-top:px2rem(75px);
      height: 100vh;
    }
  }

}
